<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>react</title>
<script src="../../s/react/16.13.1/react.production.min.js"></script>
<script src="../../s/react/16.13.1/react-dom.production.min.js"></script>
<script src="../../s/babel/5.8.38/browser.min.js"></script>
</head>
<body>
	<div id="root"></div>
	<script type="text/babel">
		// 使用 ES6 的 class来定义组件 
		// React 规定组件名称必须以大写字母开头
		// React 会将以小写字母开头的元素视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而  <Welcome /> 则代表一个组件。
		class Welcome extends React.Component {
			render() {
				return <h1>Hello, {this.props.name}</h1>;
			}
		}
		// React元素可以是用户自定义的组件
		const element = <Welcome name="Class Component" />;
		// 渲染组件
		ReactDOM.render(
  			element,
  			document.getElementById('root')
		);
    </script>
</body>
</html>